<html>
<head>
    <meta charset="utf-8">
    <script src="jquery-3.1.1.min.js"></script>
    <meta name="author" content="ykf">
    <title>弹窗</title>
    <style>
        body{
            margin: 0;
            height: 100%;
            position: relative;
            text-align: center;
        }
        main{
            background-color: #eee;
            height: 100%;
            margin: 0;
        }
        #d1{
            position: absolute;
            width: 400px;
            height: 200px;
            top: calc((100% - 100px) / 2);
            left: calc((100% - 200px) / 2);
            /*margin: 20px auto;*/
            background-color: white;
            text-align: center;
            justify-content: center;
            position: relative;
            display: none;
        }
        header{
            display: flex;
            justify-content: center;
            height: 40px;
            background-color: #ccc;
            margin-bottom: 10px;
            cursor: move;
        }
        h3{
            margin-top: 10px;
            
        }
        span{
            /*margin-top: -30px;*/
            /*float: right;*/
            position: absolute;
            right: 10px;
            top: 10px;
            cursor: pointer;
        }
        #d2{
            line-height: 20px;
        }
        input{
            width: 260px;
            height: 30px;
            margin-top: 10px;
        }
        button{
            width: 260px;
            height: 30px;
            background-color: #eee;
            margin: 10px;
        }
        
        #d3{
            display: inline-block;
            justify-content: center;
            width: 60px;
            height: 30px;
            background-color: #aaa;
            position: absolute;
            bottom: 40px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <main>
        <div id="d1">
            <header>
                <h3>用户登录</h3>
                <span>x</span>
            </header>
            <div id="d2">
                <label for="name">账号：</label>
                <input class="a1" type="text" placeholder="请输入用户名"><br>
                
                <label for="name">密码：</label>
                <input class="a2" type="text" placeholder="请输入密码"><br>
                <button>登录</button>
            </div>
        </div>
        
    </main>
    <div id="d3">点击</div>
</body>
<html>
<script>
    $('#d3').click(function(){
        $('#d1').css('display','block');
    })
    $('span').click(function(){
        $('#d1').css('display','none');
    });
    // $(document).mousemove(function(){
    //     $('#d1').css('left','calc((100% - 100px) / 2)');
    //     $('#d1').css('top','calc((100% - 200px) / 2)');
    // })
</script>